<template lang="html">
  <div>
    <div class="add">
       <el-button type="primary" @click="add">新增分类树</el-button>
    </div>
    <tableVue :list="list" :state="false" v-loading="ruleForm.loading" :total="total" @sizeChange="handSize">
        <slot>
          <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  @click="compile(scope.row)">编辑分类树
                </el-button>
                <el-button
                  size="mini"
                  type="primary"
                  @click="addTree(scope.row)">新增节点
                </el-button>
                <el-button
                  size="mini"
                  type="danger"
                  class="del"
                  @click="del(scope.row)">删除</el-button>
              </template>
          </el-table-column>
        </slot>
    </tableVue>
    <dialogVue title="操作" :dialog="dialog" @close="changeData" :state="false" >
      <slot>
          <el-form :model="pageData" :rules="rules"  ref="ruleForm" label-width="180px" class="demo-ruleForm">
            <el-form-item label="分类树名称" prop="treeName">
                <el-input v-model="pageData.treeName" placeholder="请输入内容"></el-input>
             </el-form-item>
             <el-form-item label="分类树编码,唯一编码" prop="treeCode">
                 <el-input v-model="pageData.treeCode" placeholder="请输入内容"></el-input>
              </el-form-item>
              <el-form-item label="分类树描述" prop="treeDesc">
                  <el-input v-model="pageData.treeDesc" placeholder="请输入内容"></el-input>
               </el-form-item>
               <el-form-item class="confirm">
                   <el-button type="primary" v-if="pageData.btnState=='1'" @click="upForm('post')">确定</el-button>
                   <el-button type="primary" v-if="pageData.btnState=='2'" @click="upForm('put')">更新</el-button>
               </el-form-item>
          </el-form>
      </slot>
    </dialogVue>
  </div>
</template>

<script>
import tableVue from '@/components/alltable.vue'
import Data from './index.js'
import {
  Ios_Android_Llass_List,
  add_Compile_Ios_Android_Llass,
  del_tree_class
} from "@/api/shoppingCentre/Ios_Android_Class";
import dialogVue from '@/components/dialog.vue'
export default {
  components : {
    tableVue,
    dialogVue
  },
  data () {
    return JSON.parse(JSON.stringify(Data))
  },
  mounted () {
    this.getClassList();
  },
  methods : {
    getClassList () {//获取分类树
      Ios_Android_Llass_List().then(res=>{
        if (res.data.code == 'OK') {
            this.list.tbody = res.data.data.records;
            this.total = res.data.data.total;
            this.ruleForm.loading = false;
        }else {
          this.$message.error(res.data.message)
        }
      })
    },
    add () {
      this.$refs.ruleForm&&this.$refs.ruleForm.resetFields()
      this.pageData = {}
      this.dialog = true;
      this.pageData.btnState = '1';
    },
    upForm(method) {
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          let data = {
            treeName : this.pageData.treeName,
            treeCode : this.pageData.treeCode,
            treeDesc : this.pageData.treeDesc,
            frontTreeId : this.pageData.frontTreeId
          }
          add_Compile_Ios_Android_Llass(data,method).then(res=>{
            if (res.data.code == 'OK') {
                this.getClassList();
                this.dialog = false;
                if (method == 'post') {
                  this.$message.success('新增分类树成功');
                } else {
                  this.$message.success('编辑分类树成功')
                }
            } else {
               this.$message.error(res.data.message)
            }
          })
        }
      });
    },
    changeData (data) {
      this.dialog = data;
    },
    handSize () {

    },
    del (item) {
      this.delMessage (()=>{
        var id = Array.of(item.frontTreeId)
        del_tree_class(id).then(res=>{
          if (res.data.code == 'OK') {
            this.$message.success('删除成功')
            this.getClassList();
          } else {
            this.$message.error(res.data.message)
          }
        })
      })
    },
    compile (item) {
      this.$refs.ruleForm&&this.$refs.ruleForm.resetFields()
      this.dialog = true;
      this.pageData.btnState = '2';
      this.pageData.frontTreeId = item.frontTreeId
      this.pageData.treeCode = item.treeCode
      this.pageData.treeDesc = item.treeDesc
      this.pageData.treeName = item.treeName
    },
    addTree (item) {
      this.$router.push({
        name : 'add_Ios_Android_Class',
        query : {
          id : item.frontTreeId
        }
      })
    }
  }
}
</script>

<style scoped>
 @import "../../../../styles/common.css";
  .add {
    margin: 20px 0;
  }
</style>
